<template>
	<view>
		<view class="vaccine"  @click="toDetail(item)">
			<view class="con" >
				<view class="img">
					<img src="../../static/imgs/msd.jpg" alt="">
				</view>
				<view class="introduce">
					<view class="Name">
						<h5>{{item.name}}</h5>
					</view>
					<view class="intro">
						<text>{{item.introduce}}</text>
					</view>
					<view class="prices">
						<text>￥{{item.priceNext}}</text>
					</view>
				</view>
			</view>
			<view class="more">
				<view>
					<img src="../../static/icon/dagou.png" alt="">
					<text>真苗保障</text>
				</view>
				<view>
					<img src="../../static/icon/dagou.png" alt="">
					<text>冷链配送</text>
				</view>
				<view>
					<img src="../../static/icon/dagou.png" alt="">
					<text>支持退款</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"vaccine",
		props:['item'],
		data() {
			return {
				
			}
		},
		methods: {
			toDetail(item){
				let id = item.index
				uni.navigateTo({
					url:'../../subpages/detail/detail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.vaccine{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 5px 10px;
		margin: 10px 0;
		.more{
			padding-top: 10px;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: space-around;
			font-size: 10px;
			color: #55aaff;
			view{
				display: flex;
				align-items: center;
				img{
					width: 20px;
					height: 20px;
				}
			}
		}
		.con{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 10px;
			img{
				display: block;
				width: 80px;
				height: 80px;
			}
			.introduce{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20px;
				.Name{
					
				}
				.intro{
					text{
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					font-size: 12px;
				}
				.prices{
					font-size: 18px;
					color: red;
				}
			}
		}
	}
</style>
